<script  lang="ts" >
import { goodsBanner, getGoodsList, getUserList } from '@/api/goodThing'
import { onMounted } from 'vue';
import { ref, defineComponent } from 'vue';
import { require } from '@/function/require';
import router from '@/router';
import Loader from '../components/Loader.vue'
export default defineComponent({
    components: {
        Loader,
    },
    setup() {
        const goDeatil = (path: string, second_cid: number) => {
            router.push({
                path,
                query: {
                    second_cid
                }
            })
        }

        let goodsList: any = ref()
        let goodList: any = ref()
        const goodsBannerFun: () => void = (): void => {
            goodsBanner().then((data: any) => {
                goodsList.value = data.data
                console.log(goodsList.value);
                console.log(data.data);


            })
        }
        const getGoodsFun: () => void = (): void => {
            getGoodsList().then((data: any) => {
                goodList.value = data
                // console.log(goodList);
            })
        }
        let userList: any = ref([])
        const getRandomChineseWord: () => void = (): void => {
            let _rsl = ref("");
            let _randomUniCode = Math.floor(Math.random() * (40870 - 19968) + 19968).toString(16);
            _rsl.value = eval("_rsl=" + '"\\u' + _randomUniCode + '"');
            // console.log(_rsl);
            getUserList({
                type: 'user',
                sort_by: '1',
                search_tab: 6,
                keyword: _rsl,
                offset: 0,
                count: 10
            }).then((data: any) => {
                // console.log(data);
                userList.value = data.data

            })

            // /?type=user&sort_by=1&search_tab=6&keyword=阳台顶怎么弄简单好看&offset=0&count=10   

        }
        onMounted(() => {
            goodsBannerFun()
            getGoodsFun()
            getRandomChineseWord()
        })
        return {
            goodsList,
            goDeatil,
            goodList,
            userList
        }
    },
})





</script>



<template>
    <div class="good">
        <div class="topbar">
            <div class="topbaritem">
                <div class="input"><van-search shape="round" placeholder="卫生间隔断" />
                </div>
                <span class="bell icon-jurassic_info iconfont"></span>
            </div>
        </div>
        <div class="shoppingList">
            <Loader v-if="!goodsList"></Loader>
            <div class="item" v-if="goodsList" v-for="(item, index) in goodsList.category_info" :key="index"
                @click="goDeatil('/thingDetail', item.second_code)">
                <div class="imgbox"><img :src="item.icon" alt=""></div>
                <div class="textbox">{{ item.title }}</div>
            </div>
        </div>

        <div class="ranking">
            <div class="topbar">
                <p>好物榜单</p>
                <!-- <p style="   font-size: 12px;">更多></p> -->
            </div>
        </div>
        <van-swipe :loop="false" :width="180" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in goodList" :key="index">
                <div class="swiperitemlist">
                    <div class="bgshadow"></div>
                    <div class="imgbox">
                        <div class="mask">
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                    <div class="swiperitem" v-for="(data, index) in item.item" :key="index">
                        <div class="user">
                            <img :src="data.picUrl" alt="">
                            <img class="top"
                                :src="require(`../assets/images/GoodThing-Icon/ic_commodity_ranking_top${index + 1}.png`)"
                                alt="">
                        </div>
                        <div class="namebox">
                            <p>{{ data.itemName }}</p>
                            <p>{{ data.from }}</p>
                        </div>
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <div class="ranking">
            <div class="topbar">
                <div style="position: relative;">
                    <p>精品用户</p>
                    <span class="underline"></span>
                </div>

                <!-- <p style="font-size: 12px;">更多></p> -->
            </div>
        </div>
        <van-swipe :loop="false" :width="150" class="merchant" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in userList.cell_list" :key="index">
                <div class="merchantbox">
                    <div class="topbox" :style="{ backgroundImage: `url(${item.cell_data[0].user_info.avatar_url})` }">
                    </div>
                    <div class="bottombox"><img :src="item.cell_data[0].user_info.avatar_url" alt="">
                        <p>{{ item.cell_data[0].user_info.name }}</p>
                        <p>{{ item.cell_data[0].user_info.tag_list[0] }}</p>
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <div style="height: 50px;"></div>
    </div>
</template>


<style lang="scss" scoped>
.merchantbox {
    border: 1px solid #fafafa;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    margin-right: 10px;

    .topbox {
        height: 100px;
        background-size: 300%;
        background-repeat: no-repeat;
        border-radius: 5px;
    }

    .bottombox {
        p {
            text-align: center;
        }

        width: 95%;
        height: 100px;
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;

        img {
            position: absolute;
            top: -25px;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0 auto;
            border-radius: 999%;
            width: 50px;
            height: 50px;
        }
    }
}

.underline {
    width: 64px;
    background-color: #4ddacb;
    position: absolute;
    height: 2px;
    bottom: 2px;
}

.merchant {

    padding: 0 12px;
    margin-top: 20px;
}

.van-swipe-item {
    &:nth-child(1) {
        .bgshadow {
            background-color: #b47fa3c2;
        }
    }

    &:nth-child(2) {
        .bgshadow {
            background-color: #6f8499b7;
        }
    }

    &:nth-child(3) {
        .bgshadow {
            background-color: #94743e9a;
        }
    }

    &:nth-child(4) {
        .bgshadow {
            background-color: #a9b3749d;
        }
    }

}

.swiperitem {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;

    .user {

        padding: 15px 10px;
        position: relative;

        img {
            &:nth-child(1) {
                width: 40px;
                height: 40px;
                border-radius: 5px;
            }

            &:nth-child(2) {
                width: 30px;
                height: 12px;
                position: absolute;
                // bottom: 10px;
                top: 15px;
            }
        }
    }

    .namebox {
        flex: 1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.bgshadow {
    width: 95%;
    height: 260px;

    z-index: 1;
    position: absolute;
    border-radius: 5px;
}

.swiperitem {

    &:nth-child(2) {
        color: #4ddacb;

        .user {
            .top {
                src: url(../assets/images/GoodThing-Icon/ic_commodity_ranking_top2.png);
            }
        }
    }
}

.van-swipe-item {
    &:nth-child(2) {
        .swiperitemlist {


            background-image: url(https://img1.baidu.com/it/u=3780855936,2520847884&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500);
            background-size: cover;
        }
    }

    &:nth-child(3) {
        .swiperitemlist {

            background-image: url(https://img0.baidu.com/it/u=1748591098,1324249394&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=537);
            background-size: cover;
        }
    }

    &:nth-child(4) {
        .swiperitemlist {

            background-image: url(https://img0.baidu.com/it/u=2883648789,2359170144&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=368);
            background-size: cover;
        }
    }


}

.swiperitemlist {
    border-radius: 5px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    &:nth-child(1) {
        background-image: url(https://img0.baidu.com/it/u=2456090664,2571031958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667);
        background-size: contain;
    }


    .mask {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;



        p {
            margin-left: 20px;
            font-size: 16px;
            font-weight: bold;
            color: white;
        }
    }

    .imgbox {
        position: relative;
        height: 50px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        z-index: 2;

        img {
            position: absolute;
            width: 100%;
            height: 50px;
            z-index: -1;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px
        }
    }
}

.welfarelist {
    padding: 0 8px;

    .recommenditem {
        padding: 5px;
        margin: 0 auto;
        background-color:
            #fff;
        display: flex;
        margin-top: 10px;
        border-radius: 5px;

        .textbox {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 15px;

            p {
                &:nth-child(1) {
                    font-size: 15px;
                }

                &:nth-child(2) {
                    font-size: 12px;
                }
            }
        }

        .imgbox {


            img {


                width: 50px;
                height: 50px;
                margin: 0;
                border: 1px solid #d4d4d4;
                border-radius: 5px;
            }
        }
    }

    display: flex;
    justify-content: space-between;
    // padding: 12px;

    .leftbox {
        position: relative;
        background-color: #f8efe6;
        background-position: 10px 20px;
        border-radius: 5px;
        padding: 20px;
        width: 44%;

        .bg {
            width: 100px;
            height: 100px;
            position: absolute;
            right: 0;
            top: -15px;
            z-index: 1;
        }

        p {
            &:nth-child(1) {
                font-size: 16px;
                font-weight: bold;
            }

            &:nth-child(3) {
                color: #b9b2a8;
            }
        }

        img {
            width: 55px;
            margin-top: 10px;
            height: 20px;
        }
    }

    .rightbox {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 42%;

        .recommenditem {
            padding: 16px 5px;
            margin: 0;
            background: rgb(238, 252, 233);
            background: linear-gradient(90deg, rgba(238, 252, 233, 1) 0%, rgba(205, 235, 246, 1) 99%);
            display: flex;

            border-radius: 5px;

            &:nth-child(2) {
                background: rgb(236, 246, 235);
                background: linear-gradient(90deg, rgba(236, 246, 235, 1) 0%, rgba(248, 217, 158, 1) 99%);
            }

            .textbox {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 5px;

                p {
                    &:nth-child(1) {
                        font-size: 14px;

                        span {
                            font-size: 12px;
                            color: white;
                            padding: 2px;
                            background: rgb(244, 89, 38);
                            background: linear-gradient(260deg, rgba(244, 89, 38, 1) 0%, rgba(247, 121, 84, 1) 99%);

                            border-radius: 5px;
                        }
                    }

                    &:nth-child(2) {
                        font-size: 12px;
                        color: #d0d6cc;
                    }
                }
            }

            .imgbox {


                img {


                    width: 50px;
                    height: 50px;
                    margin: 0;
                    border: 1px solid #d4d4d4;
                    border-radius: 5px;
                }
            }
        }
    }
}

.ranking {
    margin-top: 15px;
    padding: 0 15px;
    margin-bottom: 15px;
}

.item {
    text-align: center;

    .imgbox {
        width: 100%;

        img {
            width: 100%;
            border-radius: 100%;
        }
    }
}

.shoppingList {
    height: 177.3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: 0 12px;
    position: relative;

    .loadingio-spinner-cube-fwf48mahvl {
        // margin: 0 auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
    }

    .item {
        width: 17%;
        margin-top: 10px;

        .textbox {
            font-size: 13px;
        }
    }
}

.topbar {
    width: 100%;
    display: flex;
    justify-content: space-between;


    p {
        &:nth-child(1) {
            font-weight: bold;
            font-size: 16px;

        }

        &:nth-child(2) {
            color: #afafaf;

        }
    }
}

.topbaritem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 10px;

    .input {
        margin: 0 10px;
        flex: 1;

        .van-search {
            padding: 0;

        }
    }
}
</style>